<template>
  <div class="input-group">
    <span class="title" v-if="title">{{title}}</span>
    <span class="label" :class="{'focus':selfValue}">{{label}}</span>
    <input type="text" v-model="selfValue" class="text" @focus="textFocus" @blur="textBlur">
    <div class="line-group">
      <hr class="line">
      <hr class="line-light" :class="{'focus':focus||selfValue}">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        selfValue: this.value,
        focus: false
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      }
    },
    methods: {
      textFocus() {
        this.focus = true
      },
      textBlur() {
        this.focus = false
      },
      toFocus() {
        console.log(1111)
      }
    },
    mounted() {
      this.selfValue = this.value
    },
    watch: {
      value(val) {
        this.selfValue = val
      },
      // 双向绑定传事件给父组件
      selfValue(val) {
        this.$emit('input', val)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  .input-group {
    margin: 0 auto 8px;
    width: 95%;
    padding-top: 28px;
    padding-bottom: 12px;
    position: relative;
    box-sizing: border-box;
    height: 72px;
    .title {
      position: absolute;
      left: 0;
      top: 5px;
      line-height: 20px;
      font-size: $font-size-medium;
      color: #666666;
    }
    .label {
      color: #d3d6db;
      font-size: $font-size-medium;
      line-height: 20px;
      position: absolute;
      top: 36px;
      left: 0;
      transition: all .45s;
      &.focus {
        opacity: 0;
      }
    }
    .text {
      display: inline-block;
      width: 100%;
      height: 32px;
      line-height: 32px;
      position: relative;
      background-color: transparent;
      font-size: $font-size-medium;
    }
    .line-group {
      hr {
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none;
        box-sizing: content-box;
        &.line {
          width: 100%;
          height: 1px;
          background-color: #edeff2;
          left: 0;
          right: 0;
          position: absolute;
        }
        &.line-light {
          transform: scaleX(0);
          height: 2px;
          background-color: #2196f3;
          left: 0;
          right: 0;
          position: absolute;
          margin-top: -1px;
          transition: transform .45s cubic-bezier(.23, 1, .32, 1);
          &.focus {
            transform: scaleX(1);
          }
        }
      }
    }
  }
</style>
